<template>
    <div>
            
       <div class="main">
         <transition name = "fade"
            @before-enter="beforeEnter"
            @enter="enter"
            @after-enter="afterEnter"
             >
            <p id="p" v-show="show" ref="p"></p>
         </transition>
            <div class="mui-card">
				<div class="mui-card-header mui-card-media" ></div>
               <mt-swipe :auto="2000">
                  <mt-swipe-item v-for="(item,index) in iamg ">
                   <img :src="item.src"  height="100%"/>
                   </mt-swipe-item>
               </mt-swipe>
			   <div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p style="color:black;font-size:18px">{{particularsList.title}}6</p>
						<p>市场价：<span style="text-decoration: line-through">￥{{particularsList.market_price}}</span></span>   售价：<span style="color:red">￥{{particularsList.sell_price}}</span></p>
                        
                        <p>购买数量：
                            <div id="test" class="mui-numbox" data-numbox-min='1' data-numbox-max='9'>
					            <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
					            <input  class="mui-input-numbox" type="number" value="1"/>
					            <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
				            </div>
                            
                        </p>
                   
                        <p>
                           
                            <button type="button" class="mui-btn mui-btn-primary mui-btn-outlined">立即购买</button> 
                            <button type="button" class="mui-btn" @click.prevent="addPlus()" @click="show =!show">加入购物车 </button> 
                            
                        </p>
                       
					</div>
				</div>
				<div class="mui-card-footer">
					<button type="button" class="mui-btn mui-btn-danger mui-btn-outlined" @click="tuWen()">图文简绍</button>
                    <button type="button" class="mui-btn mui-btn-primary mui-btn-outlined" @click="plun()">商品评论</button>
				</div>
			</div>
       
     </div>
     
    </div> 
</template>

<script>
import $ from 'jquery';
import mui from './../../../../dist/js/mui.js';

mui('#text').init;

    export default {
       
        data(){
            return{
               id:this.$route.params.id,
               particularsList:{},
               iamg:[],
               num:0,
               go:true,
               show:false,
               
            }
        },
        methods:{
            get(){
              this.$http.get("api/goods/getinfo/"+this.id).then(
                result=>{
                    if(result.body.status==0){
                        this.particularsList=result.body.message[0];
                        //console.log(this.particularsList);
                    }else{
                        console.log("失败");
                    }
                })
            },
         getimg(){
               this.$http.get("api/getthumimages/"+this.id).then(
                    result=>{
                    if(result.body.status==0){
                      this.iamg=result.body.message;
                     
                }else{
                        console.log("失败");
                    }
                })
            },
          tuWen(){
             this.$router.push({ name: 'introduce', params: { id: this.id }});
            
           },
           plun(){
            //  this.$router.push({ name: 'comment', params: { id: this.id }});
           },
           addPlus(){
                this.num=mui('#test').numbox().getValue();
                
                var shopinfo = {
                    id:this.id,
                    number:parseInt(this.num),
                    price:this.particularsList.market_price,
                    seleted:true,
                }
                this.$store.commit('addCar',shopinfo);
            },
            beforeEnter(el,done) {
                el.style.opacity = 1;
                el.style.transform = "translate(0px)";
             },
            enter(el,done){
                 el.offsetHeight//触发效果
                 el.style.opacity = 1;
                 el.style.transition="all 0.7s linear";
                 var ballPositio = this.$refs.p.getBoundingClientRect()//获取球的方位
                 var badge=document.getElementById("badge").getBoundingClientRect();
                 var x=badge.left-ballPositio.left;
                 var y =badge.top-ballPositio.top;
                 el.style.transform = `translate(${x}px,${y}px)`;
                 done();                      
           },                                                                                                        
           afterEnter(el,done){
              this.show =!this.show;   
           }
         
        
        },
         created:function(){
        this.get();
        this.getimg();
      
        },
        mounted:function () {
            var slider = mui('#slider');
            slider.slider({
                interval: 1000,
            });

        },
        updated: function () {
            mui('#test').numbox().setOption('max',this.particularsList.stock_quantity); 
            
        }
    }
</script>

<style scoped>


.main{
    width: 100%;
    margin-bottom: 70px ;
    
}
.mint-swipe{
        height: 200px;
        overflow: hidden;
        text-align: center;
    }
        h4{
            text-align: center;
            font-size: 16px;
            margin-bottom: 10px;
        }
        p{
            margin: 10px 0px;
            text-align: justify; 
        }
    .list-group-item{
    margin-top: 10px;
    height:80px;
    }
    .mt-field{
        width: 50px;
        padding: 2px;
        height: 34px;

    }
    .form-control{
        text-align: center;
    }
    .input-group{
        width: 110px;
        height: 30px;
    }
#p{
    width: 15px;
    height: 15px;
    background: rgba(255, 0, 0, 0.5);
    border-radius: 50%;
    position: absolute;
    z-index: 100;
    top:410px;
    left:80px;

}

</style>